<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米首页</title>
		<!-- 二、定义样式 复杂型页面根据页面三个简易结构，3次样式 -->
		<link rel="stylesheet" href="css/header.css" />
		<link rel="stylesheet" href="css/main.css" />
		<link rel="stylesheet" href="css/footer.css" />
		<!-- 增加一个样式 统一去掉页面默认效果 -->
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/style.css"/>
	</head>
	<body>
		<!--一、 设计小米整体简易结构：页头、主体、页尾 
		使用结构化标记：header、main、footer
		-->
		<header>
			<!-- 控制页面：中控区 -->
			<div id="wrapper">
				<div class="head_left">
					<ul>
						<li><a href="#">小米网</a></li>
						<li><a href="3">MIUI</a></li>
						<li><a href="3">米聊</a></li>
						<li><a href="#">游戏</a></li>
						<li><a href="#">多看阅读</a></li>
						<li><a href="#">云服务</a></li>
						<li><a href="#">小米移动版</a></li>
						<li><a href="#">问题反馈</a></li>
						<li><a href="#" class="c">Select Region</a></li>
					</ul>
				</div>
				
				<div class="head_right">
					<ul>
						<!-- 精灵图使用 icon图标
						 1.使用文本样式元素补位：i、b、s、u
						 2.使用矢量图 精灵图.png[不失真]
						 优点：避免多次命名、减少服务器请求
						 3.如果使用补位元素【行元素】，必须内边距【撑大】
						 4.定位 
						 -->
						<li class="li_right"><i class="shop"></i><a href="#" class="fix">购物车(0)</a></li>
						<li><a href="#" class="c">注册</a></li>
						<li><a href="#">登录</a></li>
					</ul>
				</div>
			</div>
		</header>
		
		<main>
			<!-- 面包屑导航 nav结构化元素：导航 -->
			<nav>
				<div class="main_left">
					<div >
						<img src="./img/LOGO.png" alt="logo" />
						<img src="./img/donghua.gif" alt="footbool" />
					</div>
					
					<div >
						<ul>
							<li><a href="#">小米盒子</a></li>
							<li><a href="#">红米</a></li>
							<li><a href="#">平板</a></li>
							<li><a href="#">电视</a></li>
							<li><a href="#">盒子</a></li>
							<li><a href="#">路由器</a></li>
							<li><a href="#">智能硬件</a></li>
							<li><a href="#">服务</a></li>
							<li><a href="#">社区</a></li>
						</ul>
					</div>
				</div>
				
				
				<div class="sousuo">
					<div class="search">
						<img src="./img/search.png" alt="#" />
					</div>
					<div>
						<span>小米手机4c</span>
						<span>平衡车</span>
					</div>
				</div>
			</nav>
			<!-- 第三区域：左栏+轮播区域 -->
			<div id="af">
				
					
				
			<aside>
				<ul class="ul_sidebar">
					<!-- 弹出框，模式：div+别名 -->
					<div class="out"></div>
					<li>手机 平板 电话卡<span>></span></li>
					<li>电视 盒子<span>></span></li>
					<li>路由器 智能硬件<span>></span></li>
					<li>移动电源 插线板<span>></span></li>
					<li>耳机 音响<span>></span></li>
					<li>电池 储存卡<span>></span></li>
					<li>保护套 后盖<span>></span></li>
					<li>贴膜 其他配件<span>></span></li> 
					<li>米兔 服装<span>></span></li>
					<li>箱包 其他周边<span>></span></li>
				</ul>
			</aside>
			
			</div>
			<figure>
				<div class="main">
					<!--3.2 id="animation" js行为为主：轮播行为-->
					<div id="animation"></div>
					<!--3.3 class="container"行为为主：开辟轮播空间-->
					<div class="container">
						<!--选择轮播效果：延迟加载-->
						<div class="banner" id="lazyload">
							<ul>
								<li><img src="img/banner01.jpg" alt="1" width="888px" height="450px"/></li>
								<li><img src="img/banner02.jpg" alt="2" width="888px" height="450px"/></li>
								<li><img src="img/banner03.jpg" alt="3" width="888px" height="450px"/></li>
								<li><img src="img/banner04.jpg" alt="4" width="888px" height="450px"/></li>
								<li><img src="img/banner05.jpg" alt="5" width="888px" height="450px"/></li>
							</ul>
						</div>
					</div>
				</div>
			</figure>
			
			<section>
				<!-- 中控区 -->
				<div id="event">
					<ul>
						<li><img src="img/left.png" alt="1" width="220px"></li>
						<li><img src="img/subnav_icon01.png" alt="2" width="266px"></li>
						<li><img src="img/subnav_icon02.jpg" alt="3" width="266px"></li>
						<li><img src="img/subnav_icon03.png" alt="4" width="266px"></li>
					</ul>
				</div>
			</section>
			
			<div class="star">
				<div class="title">小米明星单品
					<div><img src="./img/arrow_rightbtn01.png" alt="" width="35px" height="25px"/></div>
					<div><img src="./img/arrow_leftbtn01.png" alt="" width="35px" height="25px"/></div>
				</div>
			
			<div class="photo">
		<div class="container_star">
			<dl>
				<dt>
					<img src="img/chazuo.png" alt="1">
					</dt>
					<dd>小米智能插座&nbsp;基础版</dd>
					<dd class="product_content">手机远程遥控，让普通电器变智能</dd>
					<dd class="product_price">49元</dd>
			</dl>
			</div>
			<div class="container_star2">
			<dl>
				<dt>
					<img src="img/jinghuaqi.png" alt="2" width="50px" height="107px">
					</dt>
					<dd>小米空气净化器2</dd>
					<dd class="product_content2">净化能力高达310m3/h</dd>
					<dd class="product_price2">699元</dd>
			</dl>
			</div>
			<div class="container_star3">
			<dl>
				<dt>
					<img src="img/chaban.png" alt="3" width="50px" height="107px">
					</dt>
					<dd>小米智能插线板</dd>
					<dd class="product_content3">手机远程控制家中电器，智能节电</dd>
					<dd class="product_price3">69元</dd>
			</dl>
			</div>
			<div class="container_star4">
			<dl>
				<dt>
					<img src="img/erji.png" alt="4" width="50px" height="107px">
					</dt>
					<dd>小米圈铁耳机</dd>
					<dd class="product_content4">动圈+动铁，双发声单元</dd>
					<dd class="product_price4">69元</dd>
			</dl>
			</div>
			<div class="container_star5">
			<dl>
				<dt>
					<img src="img/luyouqi.png" alt="5" width="50px" height="107px">
					</dt>
					<dd>小米路由器&nbsp;青春版</dd>
					<dd class="product_content5">将高性能路由器，凝聚于掌心大小</dd>
					<dd class="product_price5">79元</dd>
			</dl>
			</div>
			</div>
		</div>
		<div class="main_body">
			<div class="big">
			<div class="smart">
			<div class="title2_zhineng">智能硬件<img  style="float: right; position: relative; top: 5px;"src="img/hardware_morebtn.png" width="20px" height="20px"/>
			<a href="#" style="float: right;">查看全部</a>
			</div>
			<div class="smart_left_mitu"></div>
			
			<div class="smart_right">
				<div class="smart_right_top">
					<div class="photo01">
						<dl>
							<dt>
								<img src="./img/haraware_tizhongcheng.png" style="margin-top: 100px;"/>
							</dt>
							<dd>小米体重秤</dd>
							<dd class="product_content">高精度压力传感器，手机管理全家健康</dd>
							<dd class="product_price">99元</dd>
						</dl>
					</div>
					<div class="photo02">
						<dl>
							<dt>
								<img src="./img/haraware_luyouqi.png" alt="">
							</dt>
							<dd>小米路由器3</dd>
							<dd class="product_content">更安全更稳定，安全发售</dd>
							<dd class="product_price">149元</dd>
						</dl>
					</div>
					<div class="photo03">
						<dl>
							<dt>
								<img src="./img/haraware_shouhuan.png" alt="">
							</dt>
							<dd>小米手环&nbsp;光感版</dd>
							<dd class="product_content">实时监测心率，科学运动</dd>
							<dd class="product_price">99元</dd>
						</dl>
					</div>
					<div class="photo04">
						<dl>
							<dt>
								<img src="./img/haraware_anfang.png" alt="">
							</dt>
							<dd>小米智能安防套装</dd>
							<dd class="product_content">智能警戒，为您的家增添一份安心</dd>
							<dd class="product_price">699元</dd>
						</dl>
					</div>
					
				</div>
				
				
				
				<div >
					<div class="photo04">
						<dl>
							<dt>
								<img src="./img/haraware_xiaoyi.png" alt="">
							</dt>
							<dd>小米运动相机</dd>
							<dd class="product_content">边玩边录边拍，手机随时分享</dd>
							<dd class="product_price">399元</dd>
						</dl>
					</div>
					<div class="photo04">
						<dl>
							<dt>
								<img src="./img/haraware_xieya.png" alt="">
							</dt>
							<dd>Health智能血压计（蓝牙版）</dd>
							<dd class="product_content">送给父母的健康礼物</dd>
							<dd class="product_price">199元</dd>
						</dl>
					</div>
					
					
					<div class="photo04">
						<dl>
							<dt>
								<img src="./img/dianfanbao_icon05.jpg" alt="">
							</dt>
							<dd>小米智能摄像机&nbsp;夜视版</dd>
							<dd class="product_content">能看能听能说，手机远程观看</dd>
							<dd class="product_price">149元</dd>
						</dl>
					</div>
					<div class="photo04">
						<dl>
							<dt>
								<img src="./img/haraware_light.png" alt="">
							</dt>
							<dd>Yeelight床头灯</dd>
							<dd class="product_content">触摸式操作，给卧室1600万种颜色</dd>
							<dd class="product_price">699元</dd>
						</dl>
					</div>
				</div>
				
			</div>
			</div>
			<!--搭配 周边 -->
			<div class="majority">
				<div class="dapei">
					<p>搭配</p>
					<ul>
						<li>电池储存卡</li>
						<li>电源</li>
						<li>耳机音箱</li>
						<li>热门</li>
					</ul>
				</div>
				<div class="dapei_photo">
					<div class="dapei_photo_top">
						<div class="photo001">
							<dl>
								<img src="./img/dapei_icon01.png" width="210px" height="300px"/>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/dapei_icon03.png" alt="" />
								</dt>
								<dd>小米路由器</dd>
								<dd class="product_content">更安全更稳定，安全发售</dd>
								<dd class="product_price">149元</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/dapei_icon04.png" alt="">
								</dt>
								<dd>小米手环&nbsp;光感版</dd>
								<dd class="product_content">实时监测心率，科学运动</dd>
								<dd class="product_price">99元</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/dapei_icon05.png" style="margin-top: 100px;">
								</dt>
								<dd>小米智能安防套装</dd>
								<dd class="product_content">智能警戒，为您的家增添一份安心</dd>
								<dd class="product_price">699元</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/dapei_icon06.png" alt="">
								</dt>
								<dd>小米运动相机</dd>
								<dd class="product_content">边玩边录边拍，手机随时分享</dd>
								<dd class="product_price">399元</dd>
							</dl>
						</div>
					</div>
					<div class="dapei_photo_bottom">
						<div class="photo002">
							<dl>
								<img src="./img/dapei_icon02.png" width="210px" height="300px" />
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/dapei_icon07.png" alt="" />
								</dt>
								<dd>小米智能摄像机&nbsp;夜视版</dd>
								<dd class="product_content">能看能听能说，手机远程观看</dd>
								<dd class="product_price">149元</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/dapei_icon08.png" alt="" />
								</dt>
								<dd>小米智能摄像机&nbsp;夜视版</dd>
								<dd class="product_content">能看能听能说，手机远程观看</dd>
								<dd class="product_price">149元</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/dapei_icon09.png" alt="" />
								</dt>
								<dd>小米智能摄像机&nbsp;夜视版</dd>
								<dd class="product_content">能看能听能说，手机远程观看</dd>
								<dd class="product_price">149元</dd>
							</dl>
						</div>
						
						<div class="photo002">
							<dl>
								<img src="./img/content-top_icon01.png" width="210px" height="130px"/>
								<img src="./img/content-top_icon02.png" width="210px" height="130px" />
							</dl>
						</div>
					</div>
				</div>
			</div>
			<div class="majority">
				<div class="dapei">
					<p>周边</p>
					<ul>
						<li>箱包</li>
						<li>生活周边</li>
						<li>服装</li>
						<li>米兔</li>
						<li>热门</li>
					</ul>
				</div>
				<div class="dapei_photo">
					<div class="dapei_photo_top">
						<div class="photo002">
							<dl>
								<img src="./img/peijian_icon01.png" width="210px" height="300px" />
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/peijian_icon03.png" alt="">
								</dt>
								<dd style="font-size: 14px;">小米金属鼠标垫&nbsp;小号</dd>
								<dd class="product_content" style="color: #ff6709; font-size: 12px;">49元</dd>
								<dd class="product_price" style="color: #b0b0b0; font-size: 12px;">6483人评价</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/peijian_icon04.png" alt="">
								</dt>
								<dd>小米皮质记事本</dd>
								<dd class="product_content" style="color: #ff6709; font-size: 12px;">19元</dd>
								<dd class="product_price" style="color: #b0b0b0; font-size: 12px;">3050人评价</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/peijian_icon05.png" alt="">
								</dt>
								<dd>小米LED随身灯&nbsp;增强版</dd>
								<dd class="product_content" style="color: #ff6709; font-size: 12px;">19.9元</dd>
								<dd class="product_price" style="color: #b0b0b0; font-size: 12px;">5.6万人评价</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/peijian_icon06.png" alt="">
								</dt>
								<dd>手机支架&nbsp;小蜜蜂</dd>
								<dd class="product_content" style="color: #ff6709; font-size: 12px;">19元</dd>
								<dd class="product_price"  style="color: #b0b0b0; font-size: 12px;">6.9万人评价</dd>
							</dl>
						</div>
						
					</div>
					<div class="dapei_photo_bottom">
						<div class="photo002">
							<dl>
								<img src="./img/peijian_icon02.png" width="210px" height="300px" />
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/peijian_icon07.png" alt="">
								</dt>
								<dd>小米防尘塞&nbsp;MI标</dd>
								<dd class="product_content" style="color: #ff6709; font-size: 12px;">3.9元</dd>
								<dd class="product_price" style="color: #b0b0b0; font-size: 12px;">5.6万人评价</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/peijian_icon08.png" alt="">
								</dt>
								<dd>小米智能摄像机&nbsp;夜视版</dd>
								<dd class="product_content"  style="color: #ff6709; font-size: 12px;">149元</dd>
								<dd class="product_price"  style="color: #b0b0b0; font-size: 12px;">8461人评价</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/peijian_icon09.png" alt="">
								</dt>
								<dd>小米电源线收纳盒</dd>
								<dd class="product_content" style="color: #ff6709; font-size: 12px;">39元</dd>
								<dd class="product_price" style="color: #b0b0b0; font-size: 12px;">8461人评价</dd>
							</dl>
						</div>
						<div class="photo002" style="background-color: #f5f5f5;">
							<dl>
								<img src="./img/zhoubian_icon10.png" width="210px" height="130px" />
								<img src="./img/content-top_icon02.png" width="210px" height="130px" style="margin-top: 30px;" />
							</dl>
						</div>
					</div>
				</div>
			</div>
			<!-- 配件 -->
			<div class="majority">
				<div class="dapei">
					<p>配件</p>
					<ul>
						<li>其他配件</li>
						<li>贴膜</li>
						<li>后盖</li>
						<li>保护套</li>
						<li>热门</li>
					</ul>
				</div>
				<div class="dapei_photo">
					<div class="dapei_photo_top">
						<div class="photo002">
							<dl>
								<img src="./img/zhoubian_icon01.png" width="210px" height="300px"/>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/zhoubian_icon03.png" alt="" />
								</dt>
								<dd>小米自拍杆</dd>
								<dd class="product_content" style="color: #ff6709; font-size: 12px;">49元</dd>
								<dd class="product_price" style="color: #b0b0b0; font-size: 12px;">6.4万人评价</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/zhoubian_icon04.png" alt="" />
								</dt>
								<dd>小米手机5 钢化膜（0.22mm）</dd>
								<dd class="product_content" style="color: #ff6709; font-size: 12px;">29元</dd>
								<dd class="product_price" style="color: #b0b0b0; font-size: 12px;">1万人评价</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/zhoubian_icon05.png" alt="" />
								</dt>
								<dd>红米手机Note3 钢化膜（0.22mm）</dd>
								<dd class="product_content" style="color: #ff6709; font-size: 12px;">699元</dd>
								<dd class="product_price" style="color: #b0b0b0; font-size: 12px;">5.6万人评价</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/zhoubian_icon05.png" alt="" />
								</dt>
								<dd>小米Note 标准贴膜（2片装）</dd>
								<dd class="product_content" style="color: #ff6709; font-size: 12px;">19元</dd>
								<dd class="product_price" style="color: #b0b0b0; font-size: 12px;">2.1万人评价</dd>
							</dl>
						</div>
						
					</div>
					<div class="dapei_photo_bottom">
						<div class="photo002">
							<dl>
								<img src="./img/zhoubian_icon02.png"  width="210px" height="300px"/>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/zhoubian_icon07.png" alt="" />
								</dt>
								<dd>小米随身WIFI</dd>
								<dd class="product_content" style="color: #ff6709; font-size: 12px;">19.9元</dd>
								<dd class="product_price" style="color: #b0b0b0; font-size: 12px;">30.1万人评价</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/zhoubian_icon08.png" alt="" />
								</dt>
								<dd>小米百变随身杯</dd>
								<dd class="product_content" style="color: #ff6709; font-size: 12px;">39元</dd>
								<dd class="product_price" style="color: #b0b0b0; font-size: 12px;">1.2万人评价</dd>
							</dl>
						</div>
						<div class="photo002">
							<dl>
								<dt>
									<img src="./img/zhoubian_icon09.png" alt="" />
								</dt>
								<dd>小米手机5 硅胶保护套</dd>
								<dd class="product_content" style="color: #ff6709; font-size: 12px;">69元</dd>
								<dd class="product_price" style="color: #b0b0b0; font-size: 12px;">215人评价</dd>
							</dl>
						</div>
						<div class="photo002" style="background-color: #f5f5f5;">
							<dl>
								<img src="./img/zhoubian_icon10.png" width="210px" height="130px"/>
								<img src="./img/content-top_icon02.png" width="210px" height="130px" style="margin-top: 30px;"/>
							</dl>
						</div>
					</div>
				</div>
			</div>
			<!-- 热评 -->
			<div class="hot">
				<div class="hot_font">
					热评产品
				</div>
				<div class="hot_img">
					<div class="product_content" style="margin-left: 0;">
						
							<dt>
								<img src="./img/hotproduct_icon01.png" width="265px" height="200px">
							</dt>
							<div class="word">
							<dd class="product_font" >超值正品，再也不会担心头那里时间久了坏掉，感觉升级版萌萌哒，既好用又好看</dd>
							<dd class="product_hot" style="font-size: 12px;">来自于 香草忘忧 的评价</dd>
							<span class="product_name" style="font-size: 14px;">米兔手机U盘</span>
							<span class="product_price" style="font-size: 14px;">49.9元</span>
							</div>
					</div>
					
					<div class="product_content">
						
							<dt>
								<img src="./img/hotproduct_icon02.png" width="265px" height="200px">
							</dt>
							<div class="word">
							<dd class="product_font">绝对5星，音质挺好，包装也不错，物流也快</dd>
							<dd class="product_hot" style="font-size: 12px;">来自于 星星活火 的评价</dd>
							<span class="product_name" style="font-size: 14px;">小米活塞耳机 标准版</span>
							<span class="product_price" style="font-size: 14px;">49.9元</span>
							</div>
					</div>
					
					<div class="product_content">
						
							<dt>
								<img src="./img/hotproduct_icon03.png" width="265px" height="200px">
							</dt>
							<div class="word">
							<dd class="product_font">做工没的说，摸起来非常细腻，而且比传统的插板稳固</dd>
							<dd class="product_hot" style="font-size: 12px;">来自于 林新城 的评价</dd>
							<span class="product_name" style="font-size: 14px;">小米插线板</span>
							<span class="product_price" style="font-size: 14px;">49元</span>
							</div>
					</div>
					
					<div class="product_content"  style="line-height: 30px;">
						
							<dt>
								<img src="./img/hotproduct_icon04.png" width="265px" height="200px">
							</dt>
							<div class="word">
							<dd class="product_font">一如既往的发烧体验，炫酷外形，人性的设计，动听的音质！高低音表现平衡</dd>
							<dd class="product_hot" style="font-size: 12px;">来自于 人生如戏 的评价</dd>
							<span class="product_name" style="font-size: 14px;">小米头戴式耳机 标准版</span>
							<span class="product_price" style="font-size: 14px;">499元</span>
							</div>
					</div>
				</div>
			</div>
			<!-- 内容 -->
				<div class="content222">
					<div class="content_title">
						内容
					</div >
					<div class="content_photo">
					<div class="img01">
					<p class="headline01">图书</p>
					<h3 class="name"><a href="#">阿尼陀佛，么么哒</a></h3>
					<p class="hot1">大冰新书，12个不舍得读完的、暖心的，真实的江湖故事</p>
					<h3 class="price">9.99元</h3>
					<img src="./img/classify_icon01.png" alt="">
					</div>
					
					<div class="img02">
					<p class="headline02">主题</p>
					<h3 class="name"><a href="#">主题市场</a></h3>
					<p class="hot1">众多个性主题、百变锁屏与自由桌面让你的手机与众不同！</p>
					<h3 class="price">MIUI</h3>
					<img src="./img/classify_icon02.png" alt="">
					</div>
					
					<div class="img03">
					<p class="headline03">游戏</p>
					<h3 class="name"><a href="#">米柚手游模拟器</a></h3>
					<p class="hot1">在电脑上玩遍小米所有手游</p>
					<h3 class="price">免费</h3>
					<img src="./img/classify_icon03.png" alt="">
					</div>
					
					<div class="img04">
					<p class="headline04">应用</p>
					<h3 class="name"><a href="#">2015年度应用</a></h3>
					<p class="hot1">精彩世界，尽情下载</p>
					<h3 class="price">免费</h3>
					<img src="./img/classify_icon04.png" alt="">
					</div>
					</div>
				</div>
				<!-- 视频 -->
				<div class="video">
					<div class="video_title">
						视频
						<img style="float: right; position: relative; top: 5px;" src="./img/hardware_morebtn.png" width="20px" height="20px"/>
						<a href="#">查看全部</a>
					</div>
					<div class="video_photo">
						<div class="img_video" style="margin: 0;">
							<img src="./img/video_icon01.jpg" alt="" width="265px" height="160px"/>
							<div class="play"></div>
							<p class="p1">笑喷了，沈腾爆笑出演，6集联播</p>
							<p class="p2">小米Max沈腾爆笑预告全集</p>
						</div>
				
					
					
						<div class="img_video">
							<img src="./img/video_icon02.jpg" alt="" width="265px" height="160px"/>
							<div class="play"></div>
							<p class="p1">小米2016春季新品发布会</p>
							<p class="p2">小米5 十余项黑科技亮相</p>
						</div>
				
						<div class="img_video">
							<img src="./img/video_icon03.jpg" alt="" width="265px" height="160px"/>
							<div class="play"></div>
							<p class="p1">15秒了解小米5 有多快</p>
							<p class="p2">华少用超快语速告诉你小米5 到底有多快</p>
						</div>
					
					
						<div class="img_video">
							<img src="./img/video_icon04.jpg" alt="" width="265px" height="160px"/>
							<div class="play"></div>
							<p class="p1">《去探索》 小米年度品牌视频</p>
							<p class="p2">与小米一起探索黑科技</p>
						</div>
						</div>
				</div>
	
			</div>
			</div>
			</div>
		    </div>
		</div>
		</main>
		<footer>
			<!-- 页尾 -->
			<div class="foot">
				<div class="foot_title">
					<ul>
							<li>
								<img src="./img/footer_icon01.png" alt="" />
								<a href="#">1小时快修服务</a>
							</li>
							
							<li>
								<img src="./img/footer_icon02.png" alt="" />
								<a href="#">7天无理由退货</a>
							</li>
							
							<li>
								<img src="./img/footer_icon03.png" alt="" />
								<a href="#">15天免费换修</a>
							</li>
							
							<li>
								<img src="./img/footer_icon04.png" alt="" />
								<a href="#">满150元包邮</a>
							</li>
							<li>
								<img src="./img/footer_icon05.png" alt="" />
								<a href="#">520余家售后网点</a>
							</li>
						</ul>
					</div>
					
					
					
					<!-- 页尾结构 切片 7个空间 div>div*7-->
					<div class="footer_container">
						<!-- 帮助中心栏 -->
						<div class="column">
							<h3>帮助中心</h3>
							<ul>
								<li><a href="#">购物指南</a></li>
								<li><a href="#">支付方式</a></li>
								<li><a href="#">配送方式</a></li>
							</ul>
						</div>
						<!-- 服务支持栏 -->
						<div class="column">
							<h3>服务支持</h3>
							<ul>
								<li><a href="#">售后政策</a></li>
								<li><a href="#">自助服务</a></li>
								<li><a href="#">相关下载</a></li>
							</ul>
						</div>
						<!-- 线下门店栏 -->
						<div class="column">
							<h3>线下门店</h3>
							<ul>
								<li><a href="#">小米之家</a></li>
								<li><a href="#">服务网点</a></li>
								<li><a href="#">线下专区</a></li>
							</ul>
						</div>
						<!-- 关于小米栏 -->
						<div class="column">
							<h3>关于小米</h3>
							<ul>
								<li><a href="#">了解小米</a></li>
								<li><a href="#">加入小米</a></li>
								<li><a href="#">联系我们</a></li>
							</ul>
						</div>
						<!-- 关注我们栏 -->
						<div class="column">
							<h3>关于我们</h3>
							<ul>
								<li><a href="#">新浪微博</a></li>
								<li><a href="#">小米部落</a></li>
								<li><a href="#">官方微信</a></li>
							</ul>
						</div>
						<!-- 特色服务栏 -->
						<div class="column">
							<h3>特色服务</h3>
							<ul>
								<li><a href="#">F码通道</a></li>
								<li><a href="#">小米移动</a></li>
								<li><a href="#">防伪查询</a></li>
							</ul>
						</div>
						<!-- 客服信息栏 -->
						<div class="contact_column">
							<h3>400-100-5678</h3>
							<p>周一至周日 8：00-18：00</p>
							<p>（仅收市话费）</p>
							<a href="#">24小时在线客服</a>
						</div>
					</div>
					</div>
					<!-- 防伪标志 -->
					<div class="fangwei">
					<div class="final">
						<div class="finally">
							<ul>
								<li><img src="./img/LOGO.png" alt="" /></li>
								<li><a href="#">小米网</a></li>
								<li><a href="#">MIUI</a></li>
								<li><a href="#">米聊</a></li>
								<li><a href="#">多看书城</a></li>
								<li><a href="#">小米路由器</a></li>
								<li><a href="#">视频电话</a></li>
								<li><a href="#">小米后院</a></li>
								<li><a href="#">小米天猫店</a></li>
								<li><a href="#">小米淘宝直营店</a></li>
								<li><a href="#">小米网盟</a></li>
								<li><a href="#">问题反馈</a></li>
								<li><a href="#">Select Region</a></li>
							</ul>
							<div class="content333" style="width: 700px; margin: 2px auto; font-size: 12px;">
								mi.com京ICP证110507号京ICP备10046444号京公网安备1010802020134号京网文[201410059-0009号违法和不良信息举报电话:185-0130-1238本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
							</div>
						</div>
						<div class="zui">
							<ul>
								<li><img src="./img/safe_icon01.png" alt="" />诚信网站<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;师范企业</li>
								<li><img src="./img/safe_icon02.png" alt="" />可信网站<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信用评价</li>
								<li><img src="./img/safe_icon03.png" alt="" />网上交易<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;保障中心</li>
							</ul>
						</div>
						</div>
						<div class="mi_font" ></div>
					</div>
				</div>
			</div>
		</footer>
		<!-- 2.引入jquery封装轮播框架 .js文件-->
		<script src="js/highlight.pack.js"></script>
		<script src="js/jquery-1.11.0.min.js"></script>
		<script src="js/jquery.terseBanner.min.js"></script>
		<script src="js/script.js"></script>
	</body>
</html>
<!-- 
 位置不对，代码先拿出来
 <div id=box>
 	<div class="name">
 		<ul>
 			<li><a href="#">小米盒子</a></li>
 			<li><a href="#">红米</a></li>
 			<li><a href="#">平板</a></li>
 			<li><a href="#">电视</a></li>
 			<li><a href="#">盒子</a></li>
 			<li><a href="#">路由器</a></li>
 			<li><a href="#">智能硬件</a></li>
 			<li><a href="#">服务</a></li>
 			<li><a href="#">社区</a></li>
 		</ul>
 	</div>
 </div>
 <div class="container_star">
 	<dl>
 		<dt>
 			<img src="img/chazuo.png" alt="">
 			</dt>
 			<dd>小米智能插座&nbsp;基础版</dd>
 			<dd class="product_content">手机远程遥控，让普通电器变智能</dd>
 			<dd class="product_price">49元</dd>
 	</dl>
 </div>
 -->